<!--   
 选择商品规格sku 
 
 需要uview框架的进步器、 弹出窗 和 uniapp 提示弹窗 
 如果选择的规格符合条件 会有派发事件specSelectOk
 
 -->
<template>
	<view class="sku-box">
		<u-popup v-model="show" border-radius="20" mode="bottom" length="70%">
			<view class="sku-warp">
				<view class="sku-top">
					<view class="sku-img-box">
						<image class="sku-img" :src="imgUrl" v-if="imgUrl && imgUrl.length>0"  />
					</view>
					<view class="sku-price-box">
						<view class="sku-price">￥{{dprice}}</view>
						<view class="sku-stock">库存:{{dstock}}</view>
						<view style="padding-top: 4px;" class="sku-stock">请选择商品规格</view>
					</view>
					<view class="sku-close" @tap="closeSku">
						<u-icon name="close" color="#888" size="32"></u-icon>
					</view>
				</view>
				
				<view class="dis-box-scoll">
					<view class="sku-list" v-if="list.length && tree.length">
						<view class="sku-item" v-for="(item,index) in list" :key="index">
							<view class="sku-title">
								{{item.attrName}}
							</view>
							<view class="sku-spec">
								<text class="sku-text" :class="t.select ? 'text-action':''" 
								v-for="(t,tInd) in item.goodsSkuValDTOList" :key="tInd" @tap="specTap(t,index,tInd)">{{t.valName}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="sku-btn-box">
					<view class="sku-num-box">
						<u-number-box v-model="num" :min="1" :max="dstock"></u-number-box>
					</view>
					<view class="sku-btn bg-gradual-red" @tap="specSubmit">确认</view>
				</view>
				
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			/*  默认图片  */
			img:{
				type:String,
				default:""
			},
			/*  组合数据  */
			specList:{
				type:Array,
				default:function(){
					return []
				}
			},
			//  sku的规格信息 
			specTree:{
				type:Array,
				default:function(){
					return []
				}
			},
			/*  默认价格  */
			price:{
				type:[String,Number],
				default:'0'
			},
			/*  默认库存  */
			stock:{
				type:Number,
				default:0
			}
		},
		watch:{
			img(){
				this.imgUrl = this.img
			},
			stock(){
				this.dstock = this.stock
				
			},
			price(){
				this.dprice = this.price
			},
			specList(){
				this.num = 1
				this.select = []
				this.list = this.specList
			},
			specTree(){
				this.num = 1
				this.select = []
				this.tree = this.specTree
			}
		},
		name:"",
		data(){
			return{
				show:false,
				imgUrl:"",
				select:[],
				num:1,
				list:[],
				tree:[],
				
				dprice:0,
				dstock:0,
			}
		},
		methods:{
			specTap(item,ind, itemInd){
				let list = JSON.parse(JSON.stringify(this.list))
				if (item.hasOwnProperty("select")) {
				  item.select = item.select ? false : true
				} else {
				  item.select = true
				}
				let children = list[ind].goodsSkuValDTOList
				for (let i = 0; i < children.length; i++) {
				  children[i].select = false
				}
				children[itemInd] = item
				list[ind].goodsSkuValDTOList = children
				this.list = list
				this.select[ind] = (item.attrId + ':' + item.id)
				list = null
				if (this.select.length == this.list.length) {
				  /*  数组中有undefined说明没有选择完整  */
				  if (this.select.includes(undefined)) {
					return false
				  }
				  let specSelect = this.matchingSpecId()
				  this.dprice = specSelect.price
				  if(specSelect.length>0){
					  this.imgUrl = specSelect.imageUrl
				  }
				  this.dstock = specSelect.num
				}
			},
			
			/*  确认选择规格  */
			specSubmit(){
				/*  判断是否有规格信息  */
				if(this.list.length==0 && this.tree.length ==0){
					let specSelect = {
						buyNum: this.num,
						isSku:false,
					}
					this.$emit("specSelectOk", specSelect)
				}else{
					/* 判断如果全部规格都选择了  会对选中的规格信息进行匹配  */
					if (this.select.length == this.list.length) {
					  /*  数组中有undefined说明没有选择完整  */
					  if (this.select.includes(undefined)) {
						  uni.showToast({
								icon:"none",
								title:"请选择完整的规格信息"
						  })
					   return false
					  }
					  let specSelect = this.matchingSpecId()
					  if(specSelect.num < this.num){
							uni.showToast({
								icon:"none",
								title:"购买数量不要超过库存"
							})
							return false
					  }
					  specSelect.buyNum = this.num
					  this.$emit("specSelectOk", specSelect)
					} else {
					  uni.showToast({
							icon:"none",
							title:"请选择完整的规格信息"
					  })
					}
				}
			},
			
			/*   进行ID匹配 看选中了什么规格   */
			matchingSpecId() {
			  let specData = JSON.parse(JSON.stringify(this.tree))
			  let len = specData.length
			  /*  比对ID看是否相同 */
			  for (let i = 0; i < len; i++) {
			    let arr = specData[i].specval.split(",")
			    let currId = 0;
			    let arrLen = arr.length
			    for (let j = 0; j < arrLen; j++) {
			      if (this.select.includes(arr[j])) {
			        ++currId;
			      }
			      if (currId == arrLen) {
			        return specData[i]
			      }
			    }
			  }
			},
			
			/*  关闭sku  */
			closeSku(){
				this.show = false
			},
			
			/*  显示sku  */
			showSku(){
				this.show = true
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.sku-box{
		
		.sku-warp{
			width: 100%;
			height: 100%;
			position: relative;
		}
		
		.dis-box-scoll{
			background-color: #FFFFFF;
			width: 100%;
			height: calc(100% - 400rpx);
			overflow-x: hidden;
			overflow-y: scroll;
			padding-bottom: 10rpx;
		}
		.dis-box-scoll::-webkit-scrollbar {
		    display: none;
		}
		.sku-top{
			width: 100%;
			height: 220rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			padding: 30rpx 30rpx 20rpx 30rpx;
			position: relative;
		}
		.sku-close{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
		.sku-img-box{
			width: 170rpx;
			height: 170rpx;
			.sku-img{
				width: 100%;
				height: 100%;
				border-radius: 10rpx 10rpx;
			}
		}
		.sku-price-box{
			flex-grow: 1;
			padding-left: 20rpx;
			.sku-price{
				padding-bottom: 4rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #fa436a;
			}
			.sku-stock{
				color: #888888;
				font-size: 24rpx;
				line-height: 24rpx;
			}
		}
		.sku-btn-box{
			width: 100%;
			height: 190rpx;
			padding: 20rpx 30rpx 0 30rpx;
			.sku-btn{
				color: #FFFFFF;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 32rpx;
				border-radius: 70rpx 70rpx;
			}
		}
		
		.sku-list{
			width: 100%;
			padding: 0 20rpx 20rpx 20rpx;
			line-height: 1.3;
			.sku-title{
				color: #666666;
				font-size: 28rpx;
				padding-bottom: 10rpx;
			}
			.sku-text{
				display: inline-block;
				color: #666666;
				border: 2rpx solid #F5F5F5;
				background-color: #F5F5F5;
				padding: 8rpx 10rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
				font-size: 24rpx;
			}
			.text-action{
				border: 2rpx solid #fde7ea;
				background-color: #fde7ea;
				color: #fa436a;
			}
		}
		.sku-num-box{
			text-align: right;
			padding-bottom: 20rpx;
		}
	}
</style>
